<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 搜索框 -->
        <el-form
          :inline="true"
          ref="form"
          :model="form"
          label-width="80px"
          size="small"
        >
          <el-form-item label="关键字">
            <el-input v-model="form.keyword"></el-input>
          </el-form-item>

          <!-- 状态输入框 -->
          <el-form-item label="状态">
            <el-select v-model="form.state" placeholder="请选择">
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>

          <!-- 按钮 -->
          <el-button size="small" @click="clearFn">清除</el-button>
          <el-button type="primary" size="small" @click="searchFn"
            >搜索</el-button
          >
          <el-button type="success" size="small" style="float: right" @click="addArts"
            ><i class="el-icon-edit"></i> 新增技巧</el-button
          >
        </el-form>

        <!-- 消息提示的文案 -->
        <el-alert
          :title="`数据一共${counts}条`"
          type="info"
          show-icon
          :closable="false"
        >
        </el-alert>

        <!-- 学科目录表格 -->
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index" label="序号" width="80">
          </el-table-column>
          <el-table-column label="文章标题" width="400">
            <template slot-scope="scope">
          <!-- 播放视频图标 -->
          <span>{{scope.row.title}} </span>
          <a href="#" v-if="scope.row.videoURL!==null"
          @click.prevent="videoPlay(scope.row.videoURL)">
            <i class="el-icon-film"></i>
          </a>

            </template>

          </el-table-column>
          <el-table-column prop="visits" label="阅读数"> </el-table-column>
          <el-table-column prop="username" label="录入人"> </el-table-column>

          <el-table-column label="录入时间">
            <template slot-scope="scope">
              <span>{{ scope.row.createTime | parseTimeByString }} </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="state"
            label="状态"
            :formatter="formatter"
            width="80"
          >
          </el-table-column>
          <el-table-column prop="operate" label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="text" @click="seeFn(scope.row)">预览</el-button>

              <el-button type="text" @click="Enable(scope.row)">
                {{ scope.row.state === 0 ? "启用" : "禁用" }}</el-button
              >
              <el-button
                type="text"
                :disabled="scope.row.state ? !isDone : isDone"
                @click="editFn(scope.row)"
                >修改</el-button
              >
              <el-button
                type="text"
                :disabled="scope.row.state ? !isDone : isDone"
                @click="delFn(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
          style="float: right"
          background
          layout="prev, pager, next,sizes, jumper"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="query.pagesize"
          :current-page="query.page"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :total="counts"
          hide-on-single-page
        >
        </el-pagination>

        <!-- 预览弹框 -->
      <el-dialog
        title="预览文章"
        :visible.sync="dialogVisible"
        width="42%">
        <div class="title">{{previewList.title}}</div>
        <span>{{previewList.createTime | parseTimeByString}}</span>&nbsp;
        <span>{{previewList.username}} </span>&nbsp;
        <span>
          <i class="el-icon-view"></i>
          {{previewList.visits}}
        </span>
   <div class="body">
    <span v-html="previewList.articleBody"></span>
   </div>
      </el-dialog>

      <!-- 新增/修改技巧弹框 -->
<el-dialog
  :title="isEdit ? '修改文章':'新增文章' "
  :visible.sync="addArticles"
  @close="addCancel"
  width="42%">

 <el-form ref="artFome" :model="artForm"  label-width="85px" size="small" :rules="rules">
 <el-form-item label="文章标题:" prop="title">
    <el-input v-model="artForm.title" placeholder="请输入文章标签"></el-input>
  </el-form-item>

  <el-form-item label="文章内容:" prop="articleBody">
    <!-- 富文本编辑框 -->
    <quill-editor :options="editorOption" v-model="artForm.articleBody" />
  </el-form-item>

<el-form-item label="视频地址:">
    <el-input v-model="artForm.videoURL" placeholder="请输入视频地址"></el-input>
  </el-form-item>
 </el-form>

  <div slot="footer" class="dialog-footer">
    <el-button @click="addCancel">取 消</el-button>
    <el-button type="primary" @click="addSubmit">确 定</el-button>
  </div>
</el-dialog>

 <!-- 视频弹出层 -->
         <Video v-if="videoDialog" :src="videoSrc" @close="videoDialog=false" />
      </el-card>
    </div>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
import { list, remove, changeState, add, update } from '@/api/hmmm/articles.js'
import { status } from '@/api/hmmm/constants.js'
import Video from './video.vue'
export default {
  name: 'art',
  created () {
    // 调用获取面试技巧列表的方法
    this.getArticlesList()
  },
  components: {
    quillEditor,
    Video
  },
  data () {
    const toolbarOptions = [
      ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
      [{
        list: 'ordered'
      }, {
        list: 'bullet'
      }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
      ['blockquote', 'code-block'], // 引用  代码块-----['blockquote', 'code-block']
      ['image', 'link'] // 链接、图片、视频-----['link', 'image', 'video']
    ]

    return {
      form: {
        keyword: null, // 关键字
        state: null // 状态下拉列表值
      },
      // 面试技巧列表
      tableData: [],
      query: {
        page: 1, // 当前页面
        pagesize: 10 // 页面显示的条数
      },
      counts: 0, // 角色数据总条数
      isDone: false, // 启用\禁用切换
      dialogVisible: false, // 预览弹框显示/隐藏
      addArticles: false, // 添加/修改弹框显示\隐藏
      previewList: '', // 预览列表
      isEdit: false, // 是否修改状态
      artId: null, // 修改id
      videoDialog: false, // 视频弹出层
      videoSrc: '', // 视频地址
      artForm: { // 新增\修改 列表
        title: null, // 文章标题
        articleBody: null, // 文章内容
        videoURL: null // 视频地址
      },
      rules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' }
        ],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ]

      },

      // 富文本编辑器配置
      editorOption: {

        // //  富文本编辑器配置
        modules: {
          // 工具栏定义的
          toolbar: toolbarOptions
        },
        // 主题
        theme: 'snow',
        placeholder: ''

      }
    }
  },
  methods: {
    videoPlay (src) {
      this.videoSrc = src
      this.videoDialog = true
    },

    // 新增按钮
    addArts () {
      this.addArticles = true
      this.isEdit = false
    },

    // 修改按钮
    editFn (row) {
      // 修改id
      this.artId = row.id
      // 弹框展示
      this.addArticles = true
      // 设置是否是修改
      this.isEdit = true
      // 数据回显
      this.artForm.title = row.title
      this.artForm.articleBody = row.articleBody
      this.artForm.videoURL = row.videoURL
    },

    // 新增/修改技巧弹框  确定按钮
    addSubmit () {
      // 兜底验证
      this.$refs.artFome.validate(async valid => {
        if (valid) {
          this.isEdit ? this.editArt() : this.addArt()
        }
      })
    },

    // 新增文章
    async addArt () {
      // 调接口
      await add(this.artForm)
      // 告诉用户添加成功
      this.$message.success('添加成功')
      // 关闭弹框
      this.addArticles = false
      // 重新调用获取文章数据
      this.getArticlesList()
    },

    // 修改文章
    async  editArt () {
      // 掉接口
      await update({ id: this.artId, ...this.artForm })
      // 告诉用户修改成功
      this.$message.success('修改成功')
      // 关闭弹框
      this.addArticles = false
      // 重新调用获取文章数据
      this.getArticlesList()
    },

    // 新增/修改技巧弹框  取消按钮
    addCancel () {
      // 关闭弹框
      this.addArticles = false
      this.artForm = {}
    },

    // 预览
    seeFn (row) {
      this.dialogVisible = true
      this.previewList = row
    },

    // 启用\禁用
    async Enable (row) {
      if (row.state === 1) {
        row.state = 0
        await changeState(row, row.state)
        this.$message.success('切换成功')
      } else if (row.state === 0) {
        row.state = 1
        await changeState(row, row.state)
        this.$message.success('切换成功')
      }
    },

    // 删除
    async delFn (row) {
      // 显示删除询问对话框
      const delRes = await this.$confirm(
        '此操作将永久删除该文章, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      // 用户点击了取消，给用户进行提示
      if (delRes === 'cancel') return this.$message.info('您取消了删除')
      // 调用删除的 API
      await remove(row)

      // 删除角色的分页异常处理
      // 判断当前数据的长度是否等于 1
      if (this.tableData.length === 1) {
        this.query.page--
        // 如果是第一页的第一条
        if (this.query.page <= 0) {
          this.query.page = 1
        }
      }
      // 删除成功后的提示
      this.$message.success('删除成功')
      // 重新获取数据
      this.getArticlesList()
    },

    // 清除
    clearFn () {
      this.form = {}
      this.getArticlesList()
    },

    // 搜索
    searchFn () {
      this.query.page = 1
      this.getArticlesList()
    },

    // 每页显示的条数发生改变时触发
    handleSizeChange (newSize) {
      this.query.pagesize = newSize
      this.getArticlesList()
    },

    // 当前页面发生改变时触发
    handleCurrentChange (newPage) {
      this.query.page = newPage
      this.getArticlesList()
    },

    // 枚举状态
    formatter (row, column, cellValue, index) {
      // 用数组的 find 方法找到 id = 1 的元素，再取出它的 value
      const obj = status.find((item) => item.value === cellValue)
      return obj ? obj.label : '未知'
    },

    // 获取面试技巧列表
    async getArticlesList () {
      const res = await list({ ...this.query, ...this.form })
      this.tableData = res.data.items
      this.counts = res.data.counts
    }
  }
}
</script>

<style lang='scss'>
.title{
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}
.body{
  margin-top: 10px;
  padding: 10px;
  background-color: rgb(241, 239, 239);
  border-top: 1px dashed rgb(158, 157, 157);
}
.ql-editor{
  height: 200px;
}
.dialog-footer{
  float: right;
box-sizing: border-box;
margin-top: -30px;
}
</style>
